<template>
	<view class="content">
		<view class="guding">
			<!-- 电量显示栏-->
			<view class="top_nav">
				<view class="kong"></view>
				<!-- <image src="../../static/buy/1.png"></image> -->
				<view class="tab_item">
					<view class="return" @click="go_back"><image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/jiantou.png"></image></view>
					<view class="title">商城列表</view>
					<view class="return"></view>
				</view>
			</view>

			<!-- 筛选栏 -->
			<view class="screening_tab">
				<view class="screening_item" v-for="(item, index) in screening" :key="index" @click="chooseScreening(index)">
					<view :class="currentIndex == index ? 'screening_active' : 'screening_name'">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="mall_list">
			<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData(1)">
				<!-- 空白页 -->
				<empty v-if="screening[currentIndex].loaded === true && screening[currentIndex].mall_list.length === 0"></empty>

				<view class="list_item" v-for="(item, index) in screening[currentIndex].mall_list" :key="index" @click="toGoodsDetail(item)">
					<view class="goods_img"><image :src="Config_ysy.cosurl + item.image"></image></view>
					<view class="goods_right">
						<view class="goods_title">{{ item.name }}</view>
						<view class="goods_con">{{ item.p_name }}</view>
						<view class="goods_money">
							<view class="price_wrap">
								<view class="price">
									<text>￥</text>
									{{ item.price }}
								</view>
								<!-- <view class="baoyou">包邮</view> -->
							</view>
							<view class="fukuan">{{ item.buy_quantity }}人付款</view>
						</view>
						<view class="shenglv"><image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/detail/slh.png"></image></view>
					</view>
				</view>
				<uni-load-more :status="screening[currentIndex].loadingType"></uni-load-more>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
export default {
	components: {
		uniLoadMore,
		empty
	},
	data() {
		return {
			currentIndex: 0,
			token:'',
			screening: [
				{
					name: '综合',
					loadingType: 'more',
					loaded: false,
					pageNum: 1,
					mall_list: [
						// {
						// 	goods_img: '../../static/detail/4.png',
						// 	goods_title: '华海威POS机',
						// 	goods_con: '激活一台，返现199元',
						// 	price: '99.00',
						// 	num: '123'
						// },
					],
				},
				{
					name: '销量',
					loaded: false,
					loadingType: 'more',
					pageNum: 1,
					mall_list: [
						// {
						// 	goods_img: '../../static/detail/4.png',
						// 	goods_title: '华海威POS机',
						// 	goods_con: '激活一台，返现199元',
						// 	price: '99.00',
						// 	num: '123'
						// },
					],
				}
			],

			
		};
	},
	onLoad(option) {
		this.token=option.token
	},
	onShow() {
		this.loadData(0);
	},

	methods: {
		loadData(source) {
			if(source==0&&this.screening[this.currentIndex].loaded){
				return;
			}
			if(source==1&&this.screening[this.currentIndex].loadingType!="more"){
				return;
			}
			//轮播、资讯
			
			var url1 = '/api/cshop/posgoods/list';
			let params = {
				type: this.currentIndex,
				page_num: this.screening[this.currentIndex].pageNum,
				token:this.token
			};
			this.Unfold_data.upload_data(params, 'POST', url1, res => {
				if (res.statusCode == 200 && res.data.code == 1) {
					if(!res.data.data){
						this.screening[this.currentIndex].loadingType = "noMore";
					}else if(res.data.data.length<10){
						this.screening[this.currentIndex].loadingType = "noMore";
						this.screening[this.currentIndex].mall_list = this.screening[this.currentIndex].mall_list.concat(res.data.data);
					}else if(res.data.data.length==10){
						this.screening[this.currentIndex].mall_list = this.screening[this.currentIndex].mall_list.concat(res.data.data);
						this.screening[this.currentIndex].pageNum = this.screening[this.currentIndex].pageNum+1;
					}
					
					
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		go_back() {
			uni.navigateBack({
				delta: 1
			});
		},
		chooseScreening(index) {
			this.currentIndex = index;
			this.loadData(1);
		},
		toGoodsDetail(item) {
			uni.navigateTo({
				url: '../goodsDetail/goodsDetail?id='+item.id+'&token='+this.token
			});
		}
	}
};
</script>

<style lang="scss">
	.guding{
		position:fixed;
		top:0upx;
		z-index: 99;
	}
.content {
	width: 100%;
	position: relative;
	.top_nav{
		width: 100%;
		height: 160upx;
		background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/1.png');
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.kong{
			width: 100%;
			height: 60upx;
		}
		.tab_item{
			width: 90%;
			margin: 0 auto;
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.return{
				flex: 1;
				width: 100%;
				image{
					width: 29upx;
					height: 29upx;
				}
			}
			.title{
				flex: 8;
				width: 100%;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
			}
		}
	}
	.screening_tab {
		background-color: #ffffff;
		width: 100%;
		margin: 0 auto;
		height: 100upx;	
		padding-top: 60upx;
		border-bottom: 2upx solid #b2aeaf;
		display: flex;
		align-items: center;
		justify-content: center;
		.screening_item {
			width: 100%;
			height: 80%;
			font-weight: bold;
			display: flex;
			align-items: center;
			.screening_name {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.screening_active {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #db3269;
			}
		}
	}
	.mall_list {
		margin-top: 100upx;
		padding-top: 160upx;
		width: 90%;
		overflow: hidden;
		height: 100vh;
		margin: 0 auto;
		.list-scroll-content {
			height: 100%;
			.list_item {
				width: 100%;
				margin-top: 20upx;
				display: flex;
				align-items: center;
				justify-content: center;
				.goods_img {
					flex: 9;
					display: flex;
					align-items: center;
					image {
						width: 262.5upx;
						height: 259.7upx;
						border-radius: 20upx;
					}
				}
				.goods_right {
					flex: 11;
					.goods_title {
						font-size: 34upx;
						font-weight: bold;
					}
					.goods_con {
						font-size: 24upx;
						padding: 15upx 0;
						color: #9f9f9f;
					}
					.goods_money {
						width: 100%;
						display: flex;
						align-items: center;
						.price_wrap {
							flex: 1;
							.price {
								color: #f51322;
								font-size: 40upx;
								text {
									font-size: 28upx;
								}
							}
							.baoyou {
								font-size: 26upx;
								color: #f5a83d;
								width: 70upx;
								height: 35upx;
								border: 2upx solid #f5a83d;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
						.fukuan {
							flex: 1;
							font-size: 26upx;
							color: #b7b7b7;
						}
					}
					.shenglv {
						width: 100%;
						text-align: right;
						image {
							width: 48upx;
							height: 48upx;
						}
					}
				}
			}
		}
	}
}
</style>
